{% extends "_base_home.html" %}
{% block main %}
<script src="/static/page/role.js"></script>

<table id="user_table"></table>
<nav >
    <ul class="pagination float-right">

    </ul>
</nav>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改角色信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="modify">
                    <div class="form-group">
                        <label for="role_name" class="col-form-label">角色名:</label>
                        <input type="text" class="form-control" id="role_name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submitBtn" >提交</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="roleModal" tabindex="1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roleModalLabel">新增角色</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="role_name" class="col-form-label">角色名:</label>
                        <input type="text" class="form-control" id="new_role_name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addRole" >提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    let result = {{ result | raw }};
    let roles = result.records;
    let modifyId = '';
    function format (value, row, index) {
        return `
            <button class="btn btn-sm btn-primary" data-toggle="modal"  data-target="#roleModal">新增角色</button>
            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModal" data-rolename="${row.role_name}" data-id="${row.id}">编辑</button>
            <a href="/role_permission?roleId=${row.id}" class="btn btn-sm btn-primary">分配权限</a>
            <button data-id="${row.id}" onclick="removeRole(${row.id})" class="btn btn-sm btn-danger">删除</button>
          `;
    }
    function renderPage(){
        $(".pagination").append('<li class="page-item">\n' +
            '            <a class="page-link" href="/roles">首页</a>\n' +
            '        </li>')
        for(let i=0;i<result.totalPages;i++){
            let index = i+1;
            const active = index===result.currentPage?' active':'';
            $(".pagination").append(`<li class="page-item ${active}"><a class="page-link" href="/roles?page=${index}">${index}</a></li>`)
        }
        if(result.currentPage!==result.totalPages){
            $(".pagination").append(`<li class="page-item">
            <a class="page-link" href="/roles?page=${result.currentPage+1}">下一页</a>
        </li>`)
        }
    }
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var rolename = button.data('rolename') // Extract info from data-* attributes
        // // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        console.log('rolename',rolename)
        modal.find('.modal-body #role_name').val(rolename)
        modifyId = button.data('id')
    })
    $(document).ready(function(){
        initTable("user_table", roles, format)
        renderPage();
        $('#submitBtn').click(function (e) {
            e.preventDefault();
            var data = {
                role_name: $('#role_name').val(),
                id: modifyId
            };
            $.ajax({
                type: 'POST',
                url: '/api/updateRole',
                data: JSON.stringify(data),
                success: function (resp) {
                    if (resp.code === 200) {
                        alert('更新成功');
                        location.reload();
                    } else {
                        alert(resp.info)
                    }
                },
                contentType: 'application/json;charset=UTF-8',
                dataType: 'json'
            });
        });

        $("#addRole").click((e)=>{
            e.preventDefault();
            const roleName = $("#new_role_name").val()
            const data = {
                role_name: roleName
            }
            $.ajax({
                type: 'POST',
                url: '/api/addRole',
                data: JSON.stringify(data),
                success: function (resp) {
                    if (resp.code === 200) {
                        alert('更新成功');
                        location.reload();
                    } else {
                        alert(resp.info)
                    }
                },
                contentType: 'application/json;charset=UTF-8',
                dataType: 'json'
            });
        })
    })
</script>
{% endblock %}
